<template>
  <view class="cates-container">
    <!-- 一级分类 -->
    <!-- 将数据绑定变成 v-bind 形式 -->
    <!-- 将 bind 事件改成 v-on 即 @ 形式 -->
    <scroll-view scroll-y class="left" :style="'height:' + wh + 'px'">
      <van-sidebar :active-key="activeKey" @change="onChange">
        <!-- 渲染 一级 分类 -->
        <van-sidebar-item v-for="(item, index) in cateList" :key="index" :title="item.cat_name" />
      </van-sidebar>
    </scroll-view>

    <scroll-view scroll-y class="right" :style="'height:' + wh + 'px'">
      <!-- 二级分类 -->
      <view>
        <block v-for="(item, index) in secondList" :key="index">
          <van-row>
            <van-col span="24" class="second">
              <text class="secondtitle">/ {{ item.cat_name }} /</text>
            </van-col>
          </van-row>

          <!-- 渲染三级分类 -->
          <view>
            <van-row>
              <block v-for="(item, i3) in item.children" :key="i3">
                <!-- col 是不占据宽和高的，所以绑定样式无效 -->
                <!-- 给 三级分类在包裹一个 view ，这个 view 包含三级分类 -->
                <!-- 给 包裹容器 view 绑定点击事件即可 -->
                <van-col span="8" class="thirdcol">
                  <view  @click="goGoodsList(item.cat_id)">
                    <image class="thirdImage" :src="item.cat_icon" />
                    <text class="thirdText">{{ item.cat_name }}</text>
                  </view>
                </van-col>
              </block>
            </van-row>
          </view>
        </block>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeKey: 0, // 选中项的索引
      cateList: [], // 分类数据列表
      wh: '', // 可视区域的高度
      secondList: [] // 二级分类的数据
    }
  },
  onLoad() {
    // 获取分类数据方法
    this.getCateList()
    this.getWindowHeight()
  },
  methods: {
    // 跳转到商品列表页面
    goGoodsList(cid) {
      uni.navigateTo({
        url: `/pages/goods_list/goods_list?cid=${cid}`
      })
    },

    async getWindowHeight() {
      // uni.getSystemInfo() 是获取系统的系统
      const [err, res] = await uni.getSystemInfo()

      if (res.errMsg !== 'getSystemInfo:ok') {
        return
      }

      this.wh = res.windowHeight
    },

    // 获取分类数据的方法
    async getCateList() {
      const res = await this.request({
        url: '/categories'
      })

      if (res.meta.status !== 200) {
        return uni.showToast({
          title: '获取数据失败',
          duration: 2000,
          icon: 'none'
        })
      }

      this.cateList = res.message
      this.secondList = this.cateList[this.activeKey].children
    },

    // 切换标签时触发
    onChange(e) {
      // e.detail 获取的是激活标签的索引
      this.activeKey = e.detail
      this.secondList = this.cateList[e.detail].children
    }
  }
}
</script>

<style lang="less">
.cates-container {
  display: flex;

  .left {
    width: 85px;
  }

  .right {
    // 二级
    .second {
      text-align: center;

      .secondtitle {
        font-weight: bold;
        margin: 34rpx 0;
        display: inline-block;
      }
    }

    // 三级
    .thirdcol {
      text-align: center;

      .thirdImage {
        width: 120rpx !important;
        height: 120rpx !important;
        display: inline-block;
      }

      .thirdText {
        display: block;
        text-align: center;
      }
    }
  }
}
</style>
